<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>CSS | 水手服的小姑凉</title>
    <meta name="generator" content="VuePress 1.8.2">
    <link rel="icon" href="/favicon.ico">
    <meta name="description" content="我盼世界无 bug">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
    
    <link rel="preload" href="/assets/css/0.styles.f7abf99b.css" as="style"><link rel="preload" href="/assets/js/app.d498e529.js" as="script"><link rel="preload" href="/assets/js/3.116f0635.js" as="script"><link rel="preload" href="/assets/js/1.f7c6ffb6.js" as="script"><link rel="preload" href="/assets/js/11.6510b799.js" as="script"><link rel="prefetch" href="/assets/js/10.603c31c9.js"><link rel="prefetch" href="/assets/js/12.2512fa22.js"><link rel="prefetch" href="/assets/js/13.e7a1163d.js"><link rel="prefetch" href="/assets/js/14.ad25110b.js"><link rel="prefetch" href="/assets/js/15.0e5a6bed.js"><link rel="prefetch" href="/assets/js/16.b85088a6.js"><link rel="prefetch" href="/assets/js/17.68603d86.js"><link rel="prefetch" href="/assets/js/18.e93697ad.js"><link rel="prefetch" href="/assets/js/19.bbe19348.js"><link rel="prefetch" href="/assets/js/20.779ce5da.js"><link rel="prefetch" href="/assets/js/4.1bd3e955.js"><link rel="prefetch" href="/assets/js/5.8099a0fe.js"><link rel="prefetch" href="/assets/js/6.09a0f1dd.js"><link rel="prefetch" href="/assets/js/7.06c96a18.js"><link rel="prefetch" href="/assets/js/8.247658df.js"><link rel="prefetch" href="/assets/js/9.369ce206.js">
    <link rel="stylesheet" href="/assets/css/0.styles.f7abf99b.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container no-sidebar" data-v-1aefc0b4><div data-v-1aefc0b4><div id="loader-wrapper" class="loading-wrapper" data-v-d48f4d20 data-v-1aefc0b4 data-v-1aefc0b4><div class="loader-main" data-v-d48f4d20><div data-v-d48f4d20></div><div data-v-d48f4d20></div><div data-v-d48f4d20></div><div data-v-d48f4d20></div></div> <!----> <!----></div> <div class="password-shadow password-wrapper-out" style="display:none;" data-v-25ba6db2 data-v-1aefc0b4 data-v-1aefc0b4><h3 class="title" data-v-25ba6db2 data-v-25ba6db2>水手服的小姑凉</h3> <p class="description" data-v-25ba6db2 data-v-25ba6db2>我盼世界无 bug</p> <label id="box" class="inputBox" data-v-25ba6db2 data-v-25ba6db2><input type="password" value="" data-v-25ba6db2> <span data-v-25ba6db2>Konck! Knock!</span> <button data-v-25ba6db2>OK</button></label> <div class="footer" data-v-25ba6db2 data-v-25ba6db2><span data-v-25ba6db2><i class="iconfont reco-theme" data-v-25ba6db2></i> <a target="blank" href="https://vuepress-theme-reco.recoluan.com" data-v-25ba6db2>vuePress-theme-reco</a></span> <span data-v-25ba6db2><i class="iconfont reco-copyright" data-v-25ba6db2></i> <a data-v-25ba6db2><span data-v-25ba6db2>水手服的小姑凉</span>
            
          <span data-v-25ba6db2>2017 - </span>
          2022
        </a></span></div></div> <div class="hide" data-v-1aefc0b4><header class="navbar" data-v-1aefc0b4><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/" class="home-link router-link-active"><img src="/logo.png" alt="水手服的小姑凉" class="logo"> <span class="site-name">水手服的小姑凉</span></a> <div class="links"><div class="color-picker"><a class="color-button"><i class="iconfont reco-color"></i></a> <div class="color-picker-menu" style="display:none;"><div class="mode-options"><h4 class="title">Choose mode</h4> <ul class="color-mode-options"><li class="dark">dark</li><li class="auto active">auto</li><li class="light">light</li></ul></div></div></div> <div class="search-box"><i class="iconfont reco-search"></i> <input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/" class="nav-link"><i class="iconfont reco-home"></i>
  主页
</a></div><div class="nav-item"><div class="dropdown-wrapper"><a class="dropdown-title"><span class="title"><i class="iconfont reco-category"></i>
      分类
    </span> <span class="arrow right"></span></a> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/categories/category1/" class="nav-link"><i class="undefined"></i>
  category1
</a></li><li class="dropdown-item"><!----> <a href="/categories/category2/" class="nav-link"><i class="undefined"></i>
  category2
</a></li></ul></div></div><div class="nav-item"><a href="/tag/" class="nav-link"><i class="iconfont reco-tag"></i>
  标签
</a></div><div class="nav-item"><a href="/timeline/" class="nav-link"><i class="iconfont reco-date"></i>
  时间轴
</a></div><div class="nav-item"><div class="dropdown-wrapper"><a class="dropdown-title"><span class="title"><i class="iconfont reco-message"></i>
      工具推荐
    </span> <span class="arrow right"></span></a> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="https://codesandbox.io" target="_blank" rel="noopener noreferrer" class="nav-link external"><i class="iconfont reco-coding"></i>
  codeSandbox
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://tool.oschina.net/uploads/apidocs/jquery/regexp.html" target="_blank" rel="noopener noreferrer" class="nav-link external"><i class="iconfont reco-coding"></i>
  正则表达式手册
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><a class="dropdown-title"><span class="title"><i class="iconfont reco-message"></i>
      关于
    </span> <span class="arrow right"></span></a> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="https://blog.csdn.net/qq_43477721?spm=1000.2115.3001.5113" target="_blank" rel="noopener noreferrer" class="nav-link external"><i class="iconfont reco-bokeyuan"></i>
  CSDN
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://gitee.com/suiboyu" target="_blank" rel="noopener noreferrer" class="nav-link external"><i class="iconfont reco-mayun"></i>
  码云
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></div></div> <!----></nav></div></header> <div class="sidebar-mask" data-v-1aefc0b4></div> <aside class="sidebar" data-v-1aefc0b4><div class="personal-info-wrapper" data-v-39576ba9 data-v-1aefc0b4><img src="/avatar.png" alt="author-avatar" class="personal-img" data-v-39576ba9> <h3 class="name" data-v-39576ba9>
    水手服的小姑凉
  </h3> <div class="num" data-v-39576ba9><div data-v-39576ba9><h3 data-v-39576ba9>10</h3> <h6 data-v-39576ba9>Articles</h6></div> <div data-v-39576ba9><h3 data-v-39576ba9>4</h3> <h6 data-v-39576ba9>Tags</h6></div></div> <ul class="social-links" data-v-39576ba9></ul> <hr data-v-39576ba9></div> <nav class="nav-links"><div class="nav-item"><a href="/" class="nav-link"><i class="iconfont reco-home"></i>
  主页
</a></div><div class="nav-item"><div class="dropdown-wrapper"><a class="dropdown-title"><span class="title"><i class="iconfont reco-category"></i>
      分类
    </span> <span class="arrow right"></span></a> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/categories/category1/" class="nav-link"><i class="undefined"></i>
  category1
</a></li><li class="dropdown-item"><!----> <a href="/categories/category2/" class="nav-link"><i class="undefined"></i>
  category2
</a></li></ul></div></div><div class="nav-item"><a href="/tag/" class="nav-link"><i class="iconfont reco-tag"></i>
  标签
</a></div><div class="nav-item"><a href="/timeline/" class="nav-link"><i class="iconfont reco-date"></i>
  时间轴
</a></div><div class="nav-item"><div class="dropdown-wrapper"><a class="dropdown-title"><span class="title"><i class="iconfont reco-message"></i>
      工具推荐
    </span> <span class="arrow right"></span></a> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="https://codesandbox.io" target="_blank" rel="noopener noreferrer" class="nav-link external"><i class="iconfont reco-coding"></i>
  codeSandbox
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://tool.oschina.net/uploads/apidocs/jquery/regexp.html" target="_blank" rel="noopener noreferrer" class="nav-link external"><i class="iconfont reco-coding"></i>
  正则表达式手册
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><a class="dropdown-title"><span class="title"><i class="iconfont reco-message"></i>
      关于
    </span> <span class="arrow right"></span></a> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="https://blog.csdn.net/qq_43477721?spm=1000.2115.3001.5113" target="_blank" rel="noopener noreferrer" class="nav-link external"><i class="iconfont reco-bokeyuan"></i>
  CSDN
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://gitee.com/suiboyu" target="_blank" rel="noopener noreferrer" class="nav-link external"><i class="iconfont reco-mayun"></i>
  码云
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></div></div> <!----></nav> <!----> </aside> <div class="password-shadow password-wrapper-in" style="display:none;" data-v-25ba6db2 data-v-1aefc0b4><h3 class="title" data-v-25ba6db2 data-v-25ba6db2>CSS</h3> <!----> <label id="box" class="inputBox" data-v-25ba6db2 data-v-25ba6db2><input type="password" value="" data-v-25ba6db2> <span data-v-25ba6db2>Konck! Knock!</span> <button data-v-25ba6db2>OK</button></label> <div class="footer" data-v-25ba6db2 data-v-25ba6db2><span data-v-25ba6db2><i class="iconfont reco-theme" data-v-25ba6db2></i> <a target="blank" href="https://vuepress-theme-reco.recoluan.com" data-v-25ba6db2>vuePress-theme-reco</a></span> <span data-v-25ba6db2><i class="iconfont reco-copyright" data-v-25ba6db2></i> <a data-v-25ba6db2><span data-v-25ba6db2>水手服的小姑凉</span>
            
          <span data-v-25ba6db2>2017 - </span>
          2022
        </a></span></div></div> <div data-v-1aefc0b4><main class="page"><section><div class="page-title"><h1 class="title">CSS</h1> <div data-v-f875f3fc><i class="iconfont reco-account" data-v-f875f3fc><span data-v-f875f3fc>水手服的小姑凉</span></i> <i class="iconfont reco-date" data-v-f875f3fc><span data-v-f875f3fc>6/21/2022</span></i> <!----> <i class="tags iconfont reco-tag" data-v-f875f3fc><span class="tag-item" data-v-f875f3fc>CSS</span></i></div></div> <div class="theme-reco-content content__default"><h2 id="老说长谈的bfc"><a href="#老说长谈的bfc" class="header-anchor">#</a> 老说长谈的BFC</h2> <p>最开始学习布局的时候，必然会遇到高度塌陷的问题，通过解决这个问题，会慢慢触碰到BFC这个浏览器渲染规则。</p> <h3 id="高度塌陷"><a href="#高度塌陷" class="header-anchor">#</a> 高度塌陷</h3> <p><strong>父元素的高度，都是由内部未浮动子元素的高度撑起的</strong>。子元素浮动，会对父元素造成影响。如果子元素浮动起来，就不占用普通文档流的位置。父元素高度就会失去支撑，也称为高度坍塌。</p> <p>处理类似高度塌陷的方式有很多种，比如在已知情况下给父元素设置固定高度。但多数情况下，父元素高度由内容撑起，于是大多数情况下是难以固定父元素的高度。
于是就衍生出以下这几种解决方式。</p> <p>最初的 HTML 结构如下：</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token doctype"><span class="token punctuation">&lt;!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>en<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>UTF-8<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">http-equiv</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>X-UA-Compatible<span class="token punctuation">&quot;</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>IE=edge<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>viewport<span class="token punctuation">&quot;</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>width=device-width, initial-scale=1.0<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>title</span><span class="token punctuation">&gt;</span></span>Document<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>title</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">&gt;</span></span><span class="token style"><span class="token language-css">
    <span class="token selector">.news</span> <span class="token punctuation">{</span>
      <span class="token property">background-color</span><span class="token punctuation">:</span> gray<span class="token punctuation">;</span>
      <span class="token property">border</span><span class="token punctuation">:</span> solid 1px black<span class="token punctuation">;</span>
      <span class="token property">overflow</span><span class="token punctuation">:</span> hidden<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>

    <span class="token selector">.news img</span> <span class="token punctuation">{</span>
      <span class="token property">float</span><span class="token punctuation">:</span> left<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>

    <span class="token selector">.news p</span> <span class="token punctuation">{</span>
      <span class="token property">float</span><span class="token punctuation">:</span> right<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
  </span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>news<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>https://cdn.pixabay.com/photo/2020/07/08/04/07/sea-5382487_1280.jpg<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>
      小杨柳屋
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br></div></div><p><img src="https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/cc44928b84464326a56aced7873251d2~tplv-k3u1fbpfcp-watermark.image?" alt="图片.png"></p> <blockquote><p>两个子元素均设置了 float 属性，导致了父元素无高度撑开，因此父元素只剩下两个边框。</p></blockquote> <p><strong>方式一</strong></p> <p>父元素设置overflow:hidden属性</p> <blockquote><p>CSS中的overflow :hidden属性会强制要求父元素必须包裹住所有内部浮动的元素，以及所有元素的margin范围。但是如果遇到子元素使用了类似position这样的定位属性，超出父元素范围，就会出现副作用，被隐藏。</p></blockquote> <div class="language-css line-numbers-mode"><pre class="language-css"><code>    <span class="token selector">.news</span> <span class="token punctuation">{</span>
      <span class="token property">background-color</span><span class="token punctuation">:</span> gray<span class="token punctuation">;</span>
      <span class="token property">border</span><span class="token punctuation">:</span> solid 1px black<span class="token punctuation">;</span>
      <span class="token property">overflow</span><span class="token punctuation">:</span> hidden<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><p><img src="https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7ba6ed0b86b3453187bec85153634052~tplv-k3u1fbpfcp-watermark.image?" alt="图片.png"></p> <p><strong>方式二</strong></p> <blockquote><p>在父元素内的结尾追加一个空子元素（块级元素），并设置空子元素清除浮动影响（clear:both）。因为clear:both属性和父元素必须包含非浮动的元素。但是会多出这一个看不见的空元素，有时会影响CSS选择器和查找元素时多余的判断。</p></blockquote> <div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token selector">.clear</span> <span class="token punctuation">{</span>
  <span class="token property">clear</span><span class="token punctuation">:</span> both<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>news<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>https://cdn.pixabay.com/photo/2020/07/08/04/07/sea-5382487_1280.jpg<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>小杨柳屋<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>clear<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><p><strong>方式三</strong></p> <blockquote><p>让父元素也浮动。浮动属性也会强制父元素扩大到包含所有浮动的内部元素，BFC。但是会产生新的浮动影响，父元素之后平级的标签可能会被埋在它下面。当然可以通过方式二的套娃解决这个问题，比如给父元素之后的一个平级元素清除浮动（clear:both）。</p></blockquote> <div class="language-css line-numbers-mode"><pre class="language-css"><code>    <span class="token selector">.news</span> <span class="token punctuation">{</span>
      <span class="token property">background-color</span><span class="token punctuation">:</span> gray<span class="token punctuation">;</span>
      <span class="token property">border</span><span class="token punctuation">:</span> solid 1px black<span class="token punctuation">;</span>
      <span class="token property">float</span><span class="token punctuation">:</span> left<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><p><strong>方式四</strong></p> <blockquote><p>给父元素末尾的伪元素after设置clear:both。不会影响显示隐藏，又不会影响查找元素，又不会产生新的浮动问题。个别浏览器，display:table，可能带默认高度，再加一个属性height:0来作保险。</p></blockquote> <div class="language-css line-numbers-mode"><pre class="language-css"><code>    <span class="token selector">.clear::after</span> <span class="token punctuation">{</span>
      <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">&quot;&quot;</span><span class="token punctuation">;</span>
      <span class="token property">display</span><span class="token punctuation">:</span> table<span class="token punctuation">;</span>
      <span class="token property">height</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
      <span class="token property">clear</span><span class="token punctuation">:</span> both<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><h3 id="bfc"><a href="#bfc" class="header-anchor">#</a> BFC</h3> <p>bfc是网页的一种渲染机制，是一个特殊独立的渲染区域，它规定了渲染区域内部的块级元素应该如何布局。</p> <p>在BFC渲染区域内部如何布局，与区域外部毫不相干。外部元素也不会影响BFC渲染区域内的元素。</p> <p>类似一个vip特权，自己建立了一个小王国，级别非常高，但也与世隔绝。</p> <p>一句话概括：BFC就是页面上的一个隔离的独立渲染区域，区域里面的子元素不会影响到外面的元素，外面的元素也不会影响到区域里面的子元素。</p> <p><strong>形成BFC的四种情况</strong></p> <ol><li>float的值不是none</li> <li>position的值不是static或者relative</li> <li>display的值是inline-block、table-cell、flex、table-caption或者inline-flex</li> <li>overflow的值不是visible</li></ol> <p>之所以BFC可以用来解决高度塌陷，因为BFC盒子可以包裹BFC盒子，所以父元素包含内部float浮动元 素，浮动的子元素属于BFC盒子，父元素也属于BFC盒子，那么就能正常进行父元素的高度为子元素的高度计算结果。</p> <p>overflow:hidden、display:table、float:left 等等其实都可以形成BFC，但是得小心它们随之带来得负面影响，上面有讲到，就不多赘述了。</p> <p>其实还有IFC，BFC叫做块格式化上下文，IFC是内格式化上下文，都是不同的渲染机制，应该还有弹性格式化上下文FFC和网格格式化上下文GFC，这里只提一嘴噢，可能并不难，日常没有太多涉猎。</p> <h2 id="垂直margin合并"><a href="#垂直margin合并" class="header-anchor">#</a> 垂直margin合并</h2> <p>两个块元素，垂直方向的都有设置margin，此时它们垂直方向的间距等于其中margin值最大的，也就是说并不会累加margin值。</p> <p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c1ec57ffbcea4f42a6224f9d90a2d389~tplv-k3u1fbpfcp-watermark.image?" alt="图片.png"></p> <p>如果想累加垂直方向的外边距，可以把其中一个块元素套一层父盒子，然后给父盒子设置BFC，如此一来，垂直方向的外边距就会取最大而是累加。这也是借助BFC的渲染机制，内部元素不能超出范围影响外部，外部元素也不能进入BFC 范围内，影响内部。</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code>  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">&gt;</span></span><span class="token style"><span class="token language-css">
    <span class="token selector">.container</span> <span class="token punctuation">{</span>
      <span class="token property">overflow</span><span class="token punctuation">:</span> hidden<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>

    <span class="token selector">p</span> <span class="token punctuation">{</span>
      <span class="token property">width</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span>
      <span class="token property">height</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span>
      <span class="token property">background</span><span class="token punctuation">:</span> aqua<span class="token punctuation">;</span>
      <span class="token property">margin</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>

    <span class="token selector">.container::before</span> <span class="token punctuation">{</span>
      <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">&quot;&quot;</span><span class="token punctuation">;</span>
      <span class="token property">display</span><span class="token punctuation">:</span> table<span class="token punctuation">;</span>
      <span class="token property">height</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
  </span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
  
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>container<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>container<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br></div></div><p><img src="https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/9e05fb00e1e747d5a4b80b0d4f628e77~tplv-k3u1fbpfcp-watermark.image?" alt="图片.png"></p> <h4 id="垂直方向margin溢出"><a href="#垂直方向margin溢出" class="header-anchor">#</a> 垂直方向margin溢出</h4> <p>父元素和子元素都没设置BFC时，子元素的垂直方向上的margin值会超出父元素包裹的范围，也就是margin溢出。</p> <p>正常来说子元素的margin应该在父元素的范围之内才对。</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">&gt;</span></span><span class="token style"><span class="token language-css">
    <span class="token selector">div</span> <span class="token punctuation">{</span>
      <span class="token property">width</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span>
      <span class="token property">height</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span>
      <span class="token property">background</span><span class="token punctuation">:</span> aqua<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>

    <span class="token selector">div&gt;div</span> <span class="token punctuation">{</span>
      <span class="token property">width</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span>
      <span class="token property">height</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span>
      <span class="token property">background</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>

    <span class="token selector">.father</span> <span class="token punctuation">{</span>
      <span class="token property">margin-top</span><span class="token punctuation">:</span> 5px<span class="token punctuation">;</span>
      <span class="token property">overflow</span><span class="token punctuation">:</span> hidden
    <span class="token punctuation">}</span>

    <span class="token selector">.son</span> <span class="token punctuation">{</span>
      <span class="token property">margin-top</span><span class="token punctuation">:</span> 15px<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
  </span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>father<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>son<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br></div></div><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/878d8bc03f284dda82c70916564edfae~tplv-k3u1fbpfcp-watermark.image?" alt="图片.png"></p> <p>解决办法也是类似的，给父元素设置BFC。父元素设置 overflow:hidden 或者 父元素设置<code>::before{ content:&quot;&quot;; display:table; height: 0;}</code></p> <div class="language-css line-numbers-mode"><pre class="language-css"><code>    <span class="token selector">.father</span> <span class="token punctuation">{</span>
      <span class="token property">margin-top</span><span class="token punctuation">:</span> 5px<span class="token punctuation">;</span>
      <span class="token property">overflow</span><span class="token punctuation">:</span> hidden
    <span class="token punctuation">}</span>

    <span class="token selector">.father::before</span> <span class="token punctuation">{</span>
      <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">&quot;&quot;</span><span class="token punctuation">;</span>
      <span class="token property">display</span><span class="token punctuation">:</span> table<span class="token punctuation">;</span>
      <span class="token property">height</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><p><img src="https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2764937ccef948dcaea5304a4fe6d713~tplv-k3u1fbpfcp-watermark.image?" alt="图片.png"></p> <p><strong>其实除了设置BFC，也可以这样解决</strong></p> <ol><li>用父元素的padding-top来代替子元素的margin-top，再设置一下box-sizing:border-box，使padding不影响父元素的实际高度。</li> <li>给父元素设置border，用border来阻隔子元素的margin-top溢出问题，但边框得设置成透明的，也要设置一下box-sizing:border-box。</li> <li>在子元素的前面插入一个自身带有BFC功能的元素，比如 table，它自带display:table的功能。</li></ol> <h2 id="自适应布局"><a href="#自适应布局" class="header-anchor">#</a> 自适应布局</h2> <p>效果：左定宽，右自适应布局。</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>box<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>box-left<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>box-right<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><p>左定宽，左浮动。右边自适应，右边设置为overflow:hidden。</p> <div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token selector">.box</span> <span class="token punctuation">{</span>
 <span class="token property">height</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">.box &gt; div</span> <span class="token punctuation">{</span>
  <span class="token property">height</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">.box-left</span> <span class="token punctuation">{</span>
  <span class="token property">width</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span>
  <span class="token property">float</span><span class="token punctuation">:</span> left<span class="token punctuation">;</span>
  <span class="token property">background-color</span><span class="token punctuation">:</span> blue<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">.box-right</span> <span class="token punctuation">{</span>
  <span class="token property">overflow</span><span class="token punctuation">:</span> hidden<span class="token punctuation">;</span>
  <span class="token property">background-color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br></div></div><p>也许你要问，既然都是创建BFC，为啥右边不用右浮动，因为用了右浮动，那么就要指定合适的宽度，当然你可以使用calc来动态计算宽度。</p> <div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token selector">.box</span> <span class="token punctuation">{</span>
 <span class="token property">height</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">.box &gt; div</span> <span class="token punctuation">{</span>
  <span class="token property">height</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">.box-left</span> <span class="token punctuation">{</span>
  <span class="token property">width</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span>
  <span class="token property">background-color</span><span class="token punctuation">:</span> blue<span class="token punctuation">;</span>
  <span class="token property">float</span><span class="token punctuation">:</span> left<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">.box-right</span> <span class="token punctuation">{</span>
  <span class="token property">background-color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span>
  <span class="token property">width</span><span class="token punctuation">:</span> <span class="token function">calc</span><span class="token punctuation">(</span>100% - 200px<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token property">float</span><span class="token punctuation">:</span> right<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br></div></div><p>如果让右边右浮动，不设置宽度，宽度就默认为0，如果设置百分之百，那么就会换行了。<br>
右边元素overflow:hidden后，形成BFC渲染区域。左边的float元素就不能进入右边范围了，然后宽度就会为剩下区域的全部。</p> <p>如果是左定宽，中间自适应，右定宽。其实也一样的噢。左右浮动并设置固定宽度，中间设置overflow:hidden。或者中间通过calc来动态计算宽度。</p> <h2 id="弹性布局"><a href="#弹性布局" class="header-anchor">#</a> 弹性布局</h2> <p>浮动布局可以解决自适应的问题，但是解决起来不是很优雅，并不能随心所欲通过哪些属性轻易的控制布局。</p> <p>传统局部需要手动计算来完成自适应。</p> <p>元素宽度：<code>width+padding*2+border*2+margin*2</code></p> <p>弹性布局自动计算元素宽度、间距。</p> <h3 id="基本概念"><a href="#基本概念" class="header-anchor">#</a> 基本概念</h3> <p>弹性盒子：弹性布局的容器 弹性子元素：弹性布局的项目 主轴：默认为x轴反向 交叉轴：默认为y轴方向</p> <p>主轴和交叉轴是相对的，并不是绝对的，当主轴设置为y轴方向是，交叉轴就会变成x轴方向。</p> <p>弹性盒子设置为display:felx，则会独占一行。<br>
弹性盒子设置为display:inline-felx，则会占一行中的一部分。</p> <p><strong>常用的弹性盒子布局属性有以下几种</strong></p> <ul><li>flex-direction属性：指定容器的主轴及其排列方向，默认 row</li> <li>flex-wrap属性：主轴排列不下所有项目时，是否换行显示，默认 nowrap</li> <li>flex-flow属性：以上两个的简写方式，同时设置flex-direction和flex-wrap两个属性，默认 row nowrap</li> <li>justify-content属性：所有弹性子元素在弹性盒子主轴上的对齐方式</li> <li>align-items属性：所有弹性子元素在弹性盒子交叉轴上的对齐方式</li></ul> <p><strong>常用的弹性子元素属性有以下几种</strong></p> <ul><li>order属性：排列顺序，值越小，越靠近起点，默认 0</li> <li>flex-grow属性：放大比例，弹性盒子有足够的空间，弹性子元素可以放大，默认是 1</li> <li>flex-shrink属性：缩小比例，弹性盒子没有足够的空间，弹性子元素可以缩小，默认是 1，表示空间不足时，则等比缩小。设置为0时，则不缩小。</li> <li>align-self属性：单独定义某一个弹性子元素在交叉轴上的对齐方式，取值和align-items完全一样，多了一个auto值，表示继承父元素的align-items效果。</li></ul> <h3 id="居中"><a href="#居中" class="header-anchor">#</a> 居中</h3> <p>居中都发生在块元素容器中，分为垂直居中和水平居中。</p> <h4 id="水平居中"><a href="#水平居中" class="header-anchor">#</a> 水平居中</h4> <p><strong>如果子元素是行内元素，要水平居中</strong></p> <p>水平居中就是text-align:center。</p> <p><strong>子元素是块级元素，要水平居中</strong></p> <p>水平居中就是margin: 0 auto。</p> <p>也可以通过计算的方式，通过设置父元素的padding来让子元素达到居中，或者通过设置子元素的margin来达到居中。<br>
计算方式：父子元素都设置box-sizing:border-box，居中的值为(父宽-子宽)/2。</p> <p>还可以通过子绝absolute父相relative的方式。<br>
子元素left:50%;margin-left: -(子宽一半);<br>
或者子元素left:50%;transform:translateX(-50%);</p> <p>也可以使用弹性布局flex。 父元素直接设置display:flex;flex-direction: row;justify-content:center;</p> <h4 id="垂直居中"><a href="#垂直居中" class="header-anchor">#</a> 垂直居中</h4> <p><strong>如果子元素是行内元素，要垂直居中</strong></p> <p>垂直居中就是给父元素设置的line-height，值为父元素的高度。但这个只能单行居中，多行会有副作用。</p> <p>如果是多行子元素要给父元素设置vertical-align:middle，不过父元素还要设置inline-block或者table-cell。display:inline也可以。</p> <p>也可以使用弹性布局flex。 父元素直接设置display:flex;flex-direction: column;justify-content:center;</p> <p><strong>子元素是块级元素，要垂直居中</strong></p> <p>也可以通过计算的方式，通过设置父元素的padding来让子元素达到居中，或者通过设置子元素的margin来达到居中。<br>
计算方式：父子元素都设置box-sizing:border-box，居中的值为(父高-子高)/2。</p> <p>还可以通过子绝absolute父相relative的方式。<br>
子元素top:50%;margin-top: -(子宽一半);<br>
或者子元素top:50%;transform:translateY(-50%);</p> <p>也可以使用弹性布局flex。 父元素直接设置display:flex;flex-direction: column;justify-content:center;</p> <h2 id="重点-单位"><a href="#重点-单位" class="header-anchor">#</a> 重点-单位</h2> <p>css中的单位有很多种，比如pt、rpx、px、em、rem、%、vh、vw。</p> <h3 id="pt-设备物理像素"><a href="#pt-设备物理像素" class="header-anchor">#</a> pt 设备物理像素</h3> <p>屏幕宽/分辨率，其中每一小份就是1pt</p> <h3 id="px-css像素"><a href="#px-css像素" class="header-anchor">#</a> px css像素</h3> <p>pc机大屏幕显示器，1px约等于0.76个物理像素</p> <p>手机小屏幕，以iPhone6为标准，物理像素750，分辨率375，1px=2pt，所以，px也是一个相对单位。</p> <p>px是为了平衡一个元素在PC上显示的大小与在手机上显示的大小尽量一致而制定的。</p> <p>但是，因为手机屏幕大小不一，差异较大，所以，反而不希望一个元素在所有手机上显示一样大。而是希望能够自动等比缩放。所以，移动端不要用px。</p> <p>通常PC端大屏浏览器的网页，使用px单位较多。移动端少用，因为px的长度相对固定，无法根据大小不一的移动端设备自适应改变大小。</p> <h3 id="rem-根节点自适应"><a href="#rem-根节点自适应" class="header-anchor">#</a> rem 根节点自适应</h3> <p>以网页根元素元素上设置的默认字体大小为1rem，默认1rem=16px。</p> <p>用的多，好处是可以实现响应式布局，响应式布局指的是元素大小能根据屏幕大小随时变化。<br>
因为所有以rem为单位的位置、大小都跟着根元素字体大小而变化。<br>
所以只要在屏幕大小变化的时候改变根元素font-size就行了。</p> <h3 id="em-以父之大小"><a href="#em-以父之大小" class="header-anchor">#</a> em 以父之大小</h3> <p>继承父元素的字体大小，父元素的字体大小就是1em。用的不多。</p> <h3 id="rpx-小程序专有"><a href="#rpx-小程序专有" class="header-anchor">#</a> rpx 小程序专有</h3> <p>以iPhone6为标准，物理像素750，分辨率375。无论屏幕大小，都将屏幕分成750份，每份就是1rpx。1rpx=0.5px=1pt。</p> <p>优点是通过 rpx 设置元素和字体的大小，小程序在不同尺寸的屏幕下，可以实现自动适配。</p> <h3 id="vm-vh-视口划分一百份"><a href="#vm-vh-视口划分一百份" class="header-anchor">#</a> vm/vh 视口划分一百份</h3> <p>CSS3的特性，vh ，无论视口高度多少，都将视口高均分为100份，每1小份就是100vh，所以，也是相对单位，可随视口大小变化而自动变化。<br>
vw ，无论视口宽度多少，都将视口宽均分为100份，每1小份就是100vw，所以，也是相对单位，可随视口大小变化而自动变化。<br>
所以vw和vh，本质就是%，它的百分比是基于页面的可视区域，而视口指的就是浏览器内部的可视区域大小。</p> <h3 id="相对单位"><a href="#相对单位" class="header-anchor">#</a> % 相对单位</h3> <p>通常认为子元素的百分比完全相对于直接父元素，但是，不总是相对于父元素的对应属性值。<br>
子元素的 top 和 bottom 如果设置百分比，则相对于直接非 static 定位(默认定位)的父元素的高度。<br>
子元素的 left 和 right 如果设置百分比，则相对于直接非 static 定位(默认定位的)父元素的宽度。<br>
子元素的 padding/margin 如果设置百分比，不论是垂直方向或者是水平方向，都相对于直接父亲元素的 padding/margin ，而与父元素的 height 无关。<br>
因为 % 不总是相对于父元素的宽高或屏幕大小，所以有坑，尽量少用。</p> <h2 id="响应式布局"><a href="#响应式布局" class="header-anchor">#</a> 响应式布局</h2> <h3 id="浏览器meta标签"><a href="#浏览器meta标签" class="header-anchor">#</a> 浏览器meta标签</h3> <p><code>&lt;meta name=&quot;viewport&quot;content=&quot;width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0&quot;&gt;</code>中每个属性的含义：</p> <p>viewport 视口，显示设备内部，真正实际可用于显示网页的区域大小<br>
width 视口宽，device-width表示等于物理设备宽<br>
user-scalable，是否允许用户手工缩放网页<br>
initial-scale=1.0，加载页面时，页面的缩放比例是1，表示不缩放，原网页大小展示<br>
maximum-scale=1.0,minimum-scale=1.0，允许用户缩放网页的最大缩放比例和最小缩放比例，都是1，表示不允许用户使用过程中，中途缩放网页。</p> <h3 id="_5种响应式布局方式"><a href="#_5种响应式布局方式" class="header-anchor">#</a> 5种响应式布局方式</h3> <p>子绝父相、float布局、使用rem作单位进行等比缩放、flex布局、grid布局。</p> <p>子绝父相，结合使用media可以实现响应式布局。代码写法复杂，布局较繁琐，如果不使用media平分屏幕，宽度小于600的情况下，右侧会覆盖左侧。</p> <p>float布局，容易被挤压换行。</p> <p>使用rem作单位，等比缩放。</p> <ol><li>给根元素html设置一个字体大小</li> <li>其他尺寸单位全部用 rem</li> <li>监听屏幕的大小</li> <li>根据屏幕的大小按比例改变根节点字体的大小</li></ol> <p>因为 rem 的特性，其他的尺寸都是根据根节点字体的大小设定的，所以，根节点字体大小一变，其他所有尺寸都会按比例变大、或小。<br>
大部分浏览器的字体有个最小值：12px。也就是缩小到 12px 后，字体不会继续缩小。</p> <p>flex布局，代码简单，布局方便。如果中间有内容，缩到最小就不会再小，且左右侧的宽度变小了。</p> <h4 id="grid布局"><a href="#grid布局" class="header-anchor">#</a> grid布局</h4> <p><a href="https://link.juejin.cn?target=https%3A%2F%2Fwww.jianshu.com%2Fp%2F3762f214cd6f" title="https://www.jianshu.com/p/3762f214cd6f" target="_blank" rel="noopener noreferrer">grid布局文章<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <p>Flex布局是轴线布局，只能指定&quot;项目&quot;针对轴线的位置，可以看作是一维布局，Grid 布局则是将容器划分成“行&quot;和“列”，产生单元格，然后指定&quot;项目所在”的单元格，可以看作是二维布局.<br>
Grid布局远比 Flex布局强大。不过存在兼容性问题，知识点比较多, 学习成本相对较高, 目前兼容性还不如flex布局。</p> <p><strong>容器属性</strong></p> <p>grid-template-columns 和grid-template-rows 规定共有有几行，几列，每行，每列宽多少。</p> <p>grid-template-columns:100px 100px 100px; // 显示为三列每一列宽度100px<br>
grid-template-columns:repeat(3,100px); //同上</p> <p>也可以固定格大小，然后优先占满整个宽度，grid-template-columns: repeat(auto-fill,100px);<br>
auto-fill，有时，单元格的大小是固定的，但是容器的大小不确定，这个属性就会自动填充。</p> <p>也可以按份数规定列宽<br>
fr，比例关系，fraction ，意为&quot;片段”，表示某一行或列在总宽度和总高度中占的份数<br>
grid-template-columns:repeat(4,1fr); // 宽度平均分成四等份<br>
grid-template-columns:1fr 2fr 3fr; // 列宽这样是分成6份各占 1 2 3 份</p> <p>还可以设置最小和最大的大小范围<br>
grid-template-columns: 1fr minmax(150px，1fr); // 第一个参数最小值,第二个最大值,表示第二列最小150px，最大1fr。</p> <p>还可以让浏览器自己决定长度，auto 表示由浏览器自己决定长度，grid-template-columns: 100px auto 100px;</p> <p>还可以定义网格线，网格线 可以用方括号定义网格线名称，方便以后给盒子定位使用。<code>grid-template-columns: [c1] 100px [c2] 100px [c3] 100px [c4];</code></p> <hr> <p>column-gap和row-gap 定义格与格之间的间距，如果column-gap和row-gap间距一致，可简写为: gap:xxx</p> <p>grid-auto-flow 划分网格以后，容器的子元素会按照顺序，自动放置在每一个网格。默认的放置顺序是&quot;先行后列&quot;.即先填满第一行，再开始放入第二行(就是子元素的排放顺序)</p> <p>grid-auto-flow： row; // 先行后列<br>
grid-auto-flow： column; // 先列后行</p> <hr> <p>justify-items(水平方向)/ align-items(垂直方向)<br>
设置单元格内容的水平和垂直的对齐方式，值为: start | end | center | stretch<br>
同时设置两个属性: place-items : start end; 这是两个属性的简写</p> <p>justify-content (水平方向)/ align-content(垂直方向)<br>
设置整个内容区域（所有的项目的总和）的水平和垂直的对齐方式<br>
取值: start | end | center | stretch | space-around | space-between | space-evenly;</p> <p><strong>项目属性</strong></p> <p>grid-column-start / grid-column-end grid-row-start / grid-row-end<br>
一句话解释，用来指定item的具体位置，根据在哪根网格线</p> <p>grid-column-start:1; grid-column-end:3; 表示从第一个网格线，跨到第三个网格线之前，也就是横跨1、2两列<br>
grid-column: span 2; grid-column-end:3; 简写: grid-column: 1 / 3;<br>
grid-column-start:1; grid-column-end:3; grid-row-start:1; grid-row-end:3;<br>
跨两行，跨两列的方形区域。简写: grid-area: 1 / 1 / 3 / 3</p> <p>justify-self / align-self 当前单元格内容的水平和垂直对齐方向<br>
place-self 同时设置一个单元格内容的水平和垂直方向对齐方式</p> <h3 id="媒体查询"><a href="#媒体查询" class="header-anchor">#</a> 媒体查询</h3> <p>通过媒体查询来设置样式(Media Queries)是响应式设计的核心。它根据条件告诉浏览器如何为指定视图宽度渲染页面。</p> <p><strong>媒体类型</strong></p> <ul><li>print（打印机）</li> <li>screen（所有屏幕设备的统称：各种电脑屏幕、各种手机屏幕、各种平板屏幕，主要使用的就是这个）</li> <li>all（所有媒体设备，默认值）</li> <li>speech（应用于屏幕阅读器等发声设备）</li></ul> <p><strong>style 和 link</strong></p> <p>在 style 标签中通过 media属性 可以设置样式使用的媒体设备。比如<code>&lt;style media=&quot;print&quot;&gt;</code></p> <p>在 link 标签中通过 media属性 可以设置样式使用的媒体设备。比如<code>&lt;link rel=&quot;stylesheet&quot; href=&quot;common.css&quot;&gt; &lt;!--common.css 没有指定媒体所以全局应用--&gt;</code><br> <code>&lt;link rel=&quot;stylesheet&quot; href=&quot;screen.css&quot; media=&quot;screen&quot;&gt; &lt;!--screen.css 应用在屏幕设备--&gt;</code><br> <code>&lt;link rel=&quot;stylesheet&quot; href=&quot;print.css&quot; media=&quot;print&quot;&gt; &lt;!--print.css 应用在打印设备--&gt;</code></p> <p>如果一个css文件，可能同时被多个页面通过link引入，所以只要用link，就加media，就繁琐了，可以使用下面import的方式。</p> <p><strong>@import</strong></p> <p>使用<code>@import</code>可以引入指定设备的样式规则，文件中引入一个样式文件，在这个文件中再引入其他媒体的样式文件。</p> <p><code>&lt;link rel=&quot;stylesheet&quot; href=&quot;style.css&quot;&gt;</code></p> <div class="language- line-numbers-mode"><pre class="language-text"><code>/* style.css */
@import url(screen.css) screen;
@import url(print.css) print;
复制代码
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><p><strong>@media</strong></p> <p>可以使用 @media 做到更细的控制，即在一个样式表中为多个媒体设备定义样式。在 css文件/less文件 里也可以使用。</p> <div class="language- line-numbers-mode"><pre class="language-text"><code>&lt;style&gt;
    @media screen {
        h1 {
            font-size: 3em;
            color: blue;
        }
    }
    @media print {
        h1 {
            font-size: 8em;
            color: red;
        }
        h2, hr {
            display: none;
        }
    }
&lt;/style&gt;
复制代码
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br></div></div><p><strong>多设备支持（，分隔）</strong></p> <p>可以用 逗号分隔 同时支持多个媒体设备。</p> <p>比如： <code>@import url(screen.css) screen,print;</code><br> <code>&lt;link rel=&quot;stylesheet&quot; href=&quot;screen.css&quot; media=&quot;screen,print&quot;&gt;</code><br> <code>@media screen,print {...}</code></p> <p><strong>设备方向（orientation 属性）</strong></p> <p>使用 orientation 属性可以定义设备的方向<br>
orientation: landscape，横屏，宽度&gt;高度<br>
orientation: portrait，竖屏，高度&gt;宽度</p> <p><strong>查询条件</strong></p> <p>可以使用不同条件限制使用的样式，条件表达式需要放在扩号中</p> <p>比如</p> <p>横屏显示宽度不能超过600px</p> <div class="language- line-numbers-mode"><pre class="language-text"><code> @media screen and (orientation: landscape) and (max-width: 600px) { 
    body {
        background: #8e44ad;
    }
    h1 {
        font-size: 3em;
        color: white;
    }
}
复制代码
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><p>横屏显示或宽度不超过600px</p> <div class="language- line-numbers-mode"><pre class="language-text"><code> @media screen and (orientation: landscape), screen and (max-width: 600px) {
    body {
        background: #8e44ad;
    }
    h1 {
        font-size: 3em;
        color: white;
    }
}
复制代码
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><p>既不是横屏，宽度又不效于600时，才使用。not必须写在开头，表示后续条件都不满足，才能应用。</p> <div class="language- line-numbers-mode"><pre class="language-text"><code>@media not screen and (orientation: landscape) and (max-width:600px) {
    body {
        background: #8e44ad;
    }
    h1 {
        font-size: 3em;
        color: white;
    }
}
复制代码
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><p><strong>引入顺序</strong></p> <p>永远后一个，因为后一个范围包含前一个范围，而且后一个样式会覆盖前一个的样式。</p> <div class="language- line-numbers-mode"><pre class="language-text"><code>@import url(big.css)  only screen and (min-width:1200px);
@import url(medium.css)  only screen and (min-width:900px);
复制代码
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><p><strong>设备的划分情况</strong></p> <p>小于768的为超小屏幕（手机）<br>
768<s>992之间的为小屏设备（平板）<br>
992</s>1200的中等屏幕（桌面显示器）<br>
大于1200的宽屏设备（大桌面显示器）</p> <p><strong>父容器版心的尺寸划分</strong></p> <p>超小屏幕（手机，小于 768px）：设置宽度为 100%<br>
小屏幕（平板，大于等于 768px）：设置宽度为 750px<br>
中等屏幕（桌面显示器，大于等于 992px）：宽度设置为 970px<br>
大屏幕（大桌面显示器，大于等于 1200px）：宽度设置为 1170px</p> <p><strong>响应式字体</strong></p> <p>一个响应式的字体应关联它的父容器的宽度，这样才能适应客户端屏幕。</p> <p>rem是相对于根元素的，不要忘记重置根元素字体大小：html{font-size:100%;}<br>
完成后，你可以定义响应式字体：<br>
@media (min-width:640px){body{font-size:1rem;}}<br>
@media (min-width:960px){body{font-size:1.2rem;}}<br>
@media (min-width:1200px){body{font-size:1.5rem;}}</p> <h2 id="sass-常用功能"><a href="#sass-常用功能" class="header-anchor">#</a> sass 常用功能</h2> <h3 id="变量"><a href="#变量" class="header-anchor">#</a> 变量</h3> <div class="language- line-numbers-mode"><pre class="language-text"><code>$font-stack: Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}
复制代码
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><h3 id="嵌套"><a href="#嵌套" class="header-anchor">#</a> 嵌套</h3> <p>简单嵌套</p> <div class="language- line-numbers-mode"><pre class="language-text"><code>nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}
复制代码
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br></div></div><p>引用父级选择器<code>&amp;</code></p> <div class="language- line-numbers-mode"><pre class="language-text"><code>a {
  font-weight: bold;
  text-decoration: none;
  &amp;:hover { text-decoration: underline; }
  body.firefox &amp; { font-weight: normal; }
}
复制代码
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><p>无论CSS规则嵌套的深度怎样，关键字<code>&amp;</code>都会使用父级选择器级联替换全部其出现的位置：</p> <div class="language- line-numbers-mode"><pre class="language-text"><code>/*===== SCSS =====*/
#main {
  color: black;
  a {
    font-weight: bold;
    &amp;:hover { color: red; }
  }
}

/*===== CSS =====*/
#main {
  color: black; 
}
#main a {
  font-weight: bold; 
}
#main a:hover {
  color: red; 
}
复制代码
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br></div></div><p><code>&amp;</code>必须出现在复合选择器开头的位置，后面再连接自定义的后缀</p> <div class="language- line-numbers-mode"><pre class="language-text"><code>/*===== SCSS =====*/
#main {
  color: black;
  &amp;-sidebar { border: 1px solid; }
}

/*===== CSS =====*/
#main {
  color: black; 
}
#main-sidebar {
    border: 1px solid; 
}
复制代码
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br></div></div><p>嵌套属性</p> <div class="language- line-numbers-mode"><pre class="language-text"><code>/*===== SCSS =====*/
.demo {
  // 命令空间后带有冒号:
  font: {
    family: fantasy;
    size: 30em;
    weight: bold;
  }
}

/*===== CSS =====*/
.demo {
  font-family: fantasy;
  font-size: 30em;
  font-weight: bold; 
}
复制代码
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br></div></div><h3 id="引入"><a href="#引入" class="header-anchor">#</a> 引入</h3> <div class="language- line-numbers-mode"><pre class="language-text"><code>// _reset.scss
html, body, ul, ol {
  margin:  0;
  padding: 0;
}


// base.scss
@import 'reset';
body {
  font: 100% Helvetica, sans-serif;
  background-color: #efefef;
}
复制代码
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br></div></div><h3 id="混合"><a href="#混合" class="header-anchor">#</a> 混合</h3> <p>混合（Mixin）用来分组那些需要在页面中复用的CSS声明，开发人员可以通过向Mixin传递变量参数来让代码更加灵活，该特性在添加浏览器兼容性前缀的时候非常有用，SASS目前使用@mixin name指令来进行混合操作。</p> <div class="language- line-numbers-mode"><pre class="language-text"><code>@mixin border-radius($radius) {
  border-radius: $radius;
  -ms-border-radius: $radius;
  -moz-border-radius: $radius;
  -webkit-border-radius: $radius;
}

.box {
  @include border-radius(10px);
}
复制代码
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br></div></div><h3 id="继承"><a href="#继承" class="header-anchor">#</a> 继承</h3> <div class="language- line-numbers-mode"><pre class="language-text"><code>// 这段代码不会被输出到最终生成的CSS文件，因为它没有被任何代码所继承。
%other-styles {
  display: flex;
  flex-wrap: wrap;
}

// 下面代码会正常输出到生成的CSS文件，因为它被其接下来的代码所继承。
%message-common {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.message {
  @extend %message-common;
}

.success {
  @extend %message-common;
  border-color: green;
}

.error {
  @extend %message-common;
  border-color: red;
}

.warning {
  @extend %message-common;
  border-color: yellow;
}
复制代码
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br></div></div><h3 id="算术运算符"><a href="#算术运算符" class="header-anchor">#</a> 算术运算符</h3> <div class="language- line-numbers-mode"><pre class="language-text"><code>.container { width: 100%; }

article[role=&quot;main&quot;] {
  float: left;
  width: 600px / 960px * 100%;
}

aside[role=&quot;complementary&quot;] {
  float: right;
  width: 300px / 960px * 100%;
}
复制代码
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br></div></div><h2 id="利用css构建三角形-正三角-倒三角-左-右三角"><a href="#利用css构建三角形-正三角-倒三角-左-右三角" class="header-anchor">#</a> 利用css构建三角形（正三角，倒三角，左/右三角）</h2> <h3 id="上三角"><a href="#上三角" class="header-anchor">#</a> 上三角</h3> <div class="language- line-numbers-mode"><pre class="language-text"><code>	#triangle-up {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid red;
}
复制代码
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><h3 id="下三角"><a href="#下三角" class="header-anchor">#</a> 下三角</h3> <div class="language- line-numbers-mode"><pre class="language-text"><code>	#triangle-down {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 100px solid red;
}
复制代码
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><h3 id="左三角"><a href="#左三角" class="header-anchor">#</a> 左三角</h3> <div class="language- line-numbers-mode"><pre class="language-text"><code>	#triangle-left {
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-right: 100px solid red;
    border-bottom: 50px solid transparent;
}
复制代码
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><h3 id="右三角"><a href="#右三角" class="header-anchor">#</a> 右三角</h3> <div class="language- line-numbers-mode"><pre class="language-text"><code>	#triangle-right {
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-left: 100px solid red;
    border-bottom: 50px solid transparent;
}
复制代码
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><h3 id="左上三角"><a href="#左上三角" class="header-anchor">#</a> 左上三角</h3> <div class="language- line-numbers-mode"><pre class="language-text"><code>	#triangle-topleft {
    width: 0;
    height: 0;
    border-top: 100px solid red;
    border-right: 100px solid transparent;
}
复制代码
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><h3 id="右上三角"><a href="#右上三角" class="header-anchor">#</a> 右上三角</h3> <div class="language- line-numbers-mode"><pre class="language-text"><code>	#triangle-topright {
    width: 0;
    height: 0;
    border-top: 100px solid red;
    border-left: 100px solid transparent; 
}
复制代码
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><h3 id="左下三角"><a href="#左下三角" class="header-anchor">#</a> 左下三角</h3> <div class="language- line-numbers-mode"><pre class="language-text"><code>	#triangle-bottomleft {
    width: 0;
    height: 0;
    border-bottom: 100px solid red;
    border-right: 100px solid transparent;
}
复制代码
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><h3 id="右下三角"><a href="#右下三角" class="header-anchor">#</a> 右下三角</h3> <div class="language- line-numbers-mode"><pre class="language-text"><code>	#triangle-bottomright {
    width: 0;
    height: 0;
    border-bottom: 100px solid red;
    border-left: 100px solid transparent;
}
复制代码
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><h2 id="缩放"><a href="#缩放" class="header-anchor">#</a> 缩放</h2> <h3 id="如何实现-12px的字"><a href="#如何实现-12px的字" class="header-anchor">#</a> 如何实现 <code>&lt;</code> 12px的字</h3> <div class="language- line-numbers-mode"><pre class="language-text"><code>display:inline-block; /*scale只能缩放行内块或块元素*/
-webkit-transform: scale(0.5);  /*定义2D缩放*/
-webkit-transform-origin:left top; /*定义缩放源点为左上角*/
复制代码
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><h3 id="_0-5px的线如何实现"><a href="#_0-5px的线如何实现" class="header-anchor">#</a> 0.5px的线如何实现</h3> <p>0.5px的线，不同设备，不同浏览器差异较大</p> <div class="language- line-numbers-mode"><pre class="language-text"><code>/* 普通 */
.hr.half-px {
    height: 0.5px;
}

/* 通过css3的方式 */
.hr.scale-half {
    height: 1px;
    transform: scaleY(0.5);
    transform-origin: 50% 100%; /*为了防止线模糊*/
}
复制代码
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br></div></div><p>**更好的解决: svg **</p> <p>可以利用svg画出各种图形的0.5px线条</p> <div class="language- line-numbers-mode"><pre class="language-text"><code>.hr.svg {
    background: none;
    height: 1px;
    background: url(&quot;data:image/svg+xml;utf-8,&lt;svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1px'&gt;&lt;line x1='0' y1='0' x2='100%' y2='0' stroke='#000'&gt;&lt;/line&gt;&lt;/svg&gt;&quot;);
}
复制代码
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><p>**其中: svg图片是 **</p> <p>使用svg的line元素画线，stroke表示描边颜色，默认描边宽度stroke-width=&quot;1&quot;，由于svg的描边等属性的1px是物理像素的1px，相当于高清屏的0.5px，另外还可以使用svg的rect等元素进行绘制。</p> <div class="language- line-numbers-mode"><pre class="language-text"><code>&lt;svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1px'&gt;
    &lt;line x1='0' y1='0' x2='100%' y2='0' stroke='#000'&gt;&lt;/line&gt;
&lt;/svg&gt;
复制代码
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><p>但是在firefox兼容性不太好，可以把svg转为base64</p> <div class="language- line-numbers-mode"><pre class="language-text"><code>.hr.svg {
    background: url(&quot;data:image/svg+xml;utf-8,&lt;svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1px'&gt;&lt;line x1='0' y1='0' x2='100%' y2='0' stroke='#000'&gt;&lt;/line&gt;&lt;/svg&gt;&quot;);
    background: url(&quot;&quot;);
}
复制代码
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><h2 id="总结"><a href="#总结" class="header-anchor">#</a> 总结</h2> <p>面试过程中CSS的问题都会比较简单，当然还有动画、过渡，以及一些类似PS高级功能的样式，以后有时间，会继续更新css部分。</p> <p>本篇文章说了BFC、弹性布局、布局居中、单位、响应式布局、css预处理器、css三角、字体缩放和0.5px线条。</p> <p>如果掌握以上CSS的知识，无论是实际工作还是面试过程，都是非常实用的。反之，不明就里的话，无论是工作还是面试都会出现奇奇怪怪的问题，当然有时也会遇到难以解决的问题，最终采用迂回绕弯的方式解决，但是以上的CSS知识肯定是必备基础。</p> <p>说到响应式自适应，其实就想到了大屏，以前的同事做了一个自适应的大屏效果，思考许久，我尝试把自适应的代码写出来了，最后也在这里分享一下。<br>
那段时间有在研究如何一行代码写一个功能，虽然可读性很差，但是有点乐趣，我也在下方分享出来。</p> <div class="language- line-numbers-mode"><pre class="language-text"><code>const width = 1920;
const height = 1080;
const targetRate = parseFloat((width/height).toFixed(5))

const currentWidth = window.innerWidth
const currentHeight = window.innerHeight
const currentScreenRate = parseFloat((currentWidth/currentHeight).toFixed(5));

let xRate,yRate
if(currentScreenRate &gt; targetRate) {
	xRate = (currentHeight * targetRate / width).toFixed(5);
	yRate = (currentHeight / height).toFixed(5);
}else {
	xRate = (currentWidth / width).toFiexd(5);
	yRate = (currentWidth / taregtRate / height).toFixed(5);
}
const transformStyle = `scale(${xRate},${yRate}) translate(-50%, -50%)`;


// 一行代码的简写，声明变量可以通过reduce来传递，有几层变量就嵌套基层reduce。也得到了上面transformStyle的结果
Array(1).fill(0).reduce((_) =&gt; Array(1).fill(0).reduce(__ =&gt; (__.currentScreenRate &gt; __.targetRate ? (_.xRate = (_.currentHeight * __.targetRate / _.width).toFixed(5),_.yRate = (_.currentHeight / _.height).toFixed(5)):(_.xRate = (_.currentWidth / _.width).toFiexd(5),_.yRate = (_.currentWidth / __.taregtRate / _.height).toFixed(5)),`scale(${_.xRate},${_.yRate}) translate(-50%, -50%)`), Object({targetRate: parseFloat((_.width/_.height).toFixed(5)), currentScreenRate: parseFloat((_.currentWidth/_.currentHeight).toFixed(5))})), Object({width: 1920, height: 1080, currentWidth: window.innerWidth, currentHeight: window.innerHeight, xRate: void 0, yRate: void 0}))
复制代码
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br></div></div></div></section> <footer class="page-edit"><!----> <!----></footer> <!----> <div class="comments-wrapper"><!----></div> <ul class="side-bar sub-sidebar-wrapper" style="width:12rem;" data-v-cb1513f6><li class="level-2" data-v-cb1513f6><a href="/blogs/category1/2018/121501.html#老说长谈的bfc" class="sidebar-link reco-side-老说长谈的bfc" data-v-cb1513f6>老说长谈的BFC</a></li><li class="level-3" data-v-cb1513f6><a href="/blogs/category1/2018/121501.html#高度塌陷" class="sidebar-link reco-side-高度塌陷" data-v-cb1513f6>高度塌陷</a></li><li class="level-3" data-v-cb1513f6><a href="/blogs/category1/2018/121501.html#bfc" class="sidebar-link reco-side-bfc" data-v-cb1513f6>BFC</a></li><li class="level-2" data-v-cb1513f6><a href="/blogs/category1/2018/121501.html#垂直margin合并" class="sidebar-link reco-side-垂直margin合并" data-v-cb1513f6>垂直margin合并</a></li><li class="level-2" data-v-cb1513f6><a href="/blogs/category1/2018/121501.html#自适应布局" class="sidebar-link reco-side-自适应布局" data-v-cb1513f6>自适应布局</a></li><li class="level-2" data-v-cb1513f6><a href="/blogs/category1/2018/121501.html#弹性布局" class="sidebar-link reco-side-弹性布局" data-v-cb1513f6>弹性布局</a></li><li class="level-3" data-v-cb1513f6><a href="/blogs/category1/2018/121501.html#基本概念" class="sidebar-link reco-side-基本概念" data-v-cb1513f6>基本概念</a></li><li class="level-3" data-v-cb1513f6><a href="/blogs/category1/2018/121501.html#居中" class="sidebar-link reco-side-居中" data-v-cb1513f6>居中</a></li><li class="level-2" data-v-cb1513f6><a href="/blogs/category1/2018/121501.html#重点-单位" class="sidebar-link reco-side-重点-单位" data-v-cb1513f6>重点-单位</a></li><li class="level-3" data-v-cb1513f6><a href="/blogs/category1/2018/121501.html#pt-设备物理像素" class="sidebar-link reco-side-pt-设备物理像素" data-v-cb1513f6>pt 设备物理像素</a></li><li class="level-3" data-v-cb1513f6><a href="/blogs/category1/2018/121501.html#px-css像素" class="sidebar-link reco-side-px-css像素" data-v-cb1513f6>px css像素</a></li><li class="level-3" data-v-cb1513f6><a href="/blogs/category1/2018/121501.html#rem-根节点自适应" class="sidebar-link reco-side-rem-根节点自适应" data-v-cb1513f6>rem 根节点自适应</a></li><li class="level-3" data-v-cb1513f6><a href="/blogs/category1/2018/121501.html#em-以父之大小" class="sidebar-link reco-side-em-以父之大小" data-v-cb1513f6>em 以父之大小</a></li><li class="level-3" data-v-cb1513f6><a href="/blogs/category1/2018/121501.html#rpx-小程序专有" class="sidebar-link reco-side-rpx-小程序专有" data-v-cb1513f6>rpx 小程序专有</a></li><li class="level-3" data-v-cb1513f6><a href="/blogs/category1/2018/121501.html#vm-vh-视口划分一百份" class="sidebar-link reco-side-vm-vh-视口划分一百份" data-v-cb1513f6>vm/vh 视口划分一百份</a></li><li class="level-3" data-v-cb1513f6><a href="/blogs/category1/2018/121501.html#相对单位" class="sidebar-link reco-side-相对单位" data-v-cb1513f6>% 相对单位</a></li><li class="level-2" data-v-cb1513f6><a href="/blogs/category1/2018/121501.html#响应式布局" class="sidebar-link reco-side-响应式布局" data-v-cb1513f6>响应式布局</a></li><li class="level-3" data-v-cb1513f6><a href="/blogs/category1/2018/121501.html#浏览器meta标签" class="sidebar-link reco-side-浏览器meta标签" data-v-cb1513f6>浏览器meta标签</a></li><li class="level-3" data-v-cb1513f6><a href="/blogs/category1/2018/121501.html#_5种响应式布局方式" class="sidebar-link reco-side-_5种响应式布局方式" data-v-cb1513f6>5种响应式布局方式</a></li><li class="level-3" data-v-cb1513f6><a href="/blogs/category1/2018/121501.html#媒体查询" class="sidebar-link reco-side-媒体查询" data-v-cb1513f6>媒体查询</a></li><li class="level-2" data-v-cb1513f6><a href="/blogs/category1/2018/121501.html#sass-常用功能" class="sidebar-link reco-side-sass-常用功能" data-v-cb1513f6>sass 常用功能</a></li><li class="level-3" data-v-cb1513f6><a href="/blogs/category1/2018/121501.html#变量" class="sidebar-link reco-side-变量" data-v-cb1513f6>变量</a></li><li class="level-3" data-v-cb1513f6><a href="/blogs/category1/2018/121501.html#嵌套" class="sidebar-link reco-side-嵌套" data-v-cb1513f6>嵌套</a></li><li class="level-3" data-v-cb1513f6><a href="/blogs/category1/2018/121501.html#引入" class="sidebar-link reco-side-引入" data-v-cb1513f6>引入</a></li><li class="level-3" data-v-cb1513f6><a href="/blogs/category1/2018/121501.html#混合" class="sidebar-link reco-side-混合" data-v-cb1513f6>混合</a></li><li class="level-3" data-v-cb1513f6><a href="/blogs/category1/2018/121501.html#继承" class="sidebar-link reco-side-继承" data-v-cb1513f6>继承</a></li><li class="level-3" data-v-cb1513f6><a href="/blogs/category1/2018/121501.html#算术运算符" class="sidebar-link reco-side-算术运算符" data-v-cb1513f6>算术运算符</a></li><li class="level-2" data-v-cb1513f6><a href="/blogs/category1/2018/121501.html#利用css构建三角形-正三角-倒三角-左-右三角" class="sidebar-link reco-side-利用css构建三角形-正三角-倒三角-左-右三角" data-v-cb1513f6>利用css构建三角形（正三角，倒三角，左/右三角）</a></li><li class="level-3" data-v-cb1513f6><a href="/blogs/category1/2018/121501.html#上三角" class="sidebar-link reco-side-上三角" data-v-cb1513f6>上三角</a></li><li class="level-3" data-v-cb1513f6><a href="/blogs/category1/2018/121501.html#下三角" class="sidebar-link reco-side-下三角" data-v-cb1513f6>下三角</a></li><li class="level-3" data-v-cb1513f6><a href="/blogs/category1/2018/121501.html#左三角" class="sidebar-link reco-side-左三角" data-v-cb1513f6>左三角</a></li><li class="level-3" data-v-cb1513f6><a href="/blogs/category1/2018/121501.html#右三角" class="sidebar-link reco-side-右三角" data-v-cb1513f6>右三角</a></li><li class="level-3" data-v-cb1513f6><a href="/blogs/category1/2018/121501.html#左上三角" class="sidebar-link reco-side-左上三角" data-v-cb1513f6>左上三角</a></li><li class="level-3" data-v-cb1513f6><a href="/blogs/category1/2018/121501.html#右上三角" class="sidebar-link reco-side-右上三角" data-v-cb1513f6>右上三角</a></li><li class="level-3" data-v-cb1513f6><a href="/blogs/category1/2018/121501.html#左下三角" class="sidebar-link reco-side-左下三角" data-v-cb1513f6>左下三角</a></li><li class="level-3" data-v-cb1513f6><a href="/blogs/category1/2018/121501.html#右下三角" class="sidebar-link reco-side-右下三角" data-v-cb1513f6>右下三角</a></li><li class="level-2" data-v-cb1513f6><a href="/blogs/category1/2018/121501.html#缩放" class="sidebar-link reco-side-缩放" data-v-cb1513f6>缩放</a></li><li class="level-3" data-v-cb1513f6><a href="/blogs/category1/2018/121501.html#如何实现-12px的字" class="sidebar-link reco-side-如何实现-12px的字" data-v-cb1513f6>如何实现 &lt; 12px的字</a></li><li class="level-3" data-v-cb1513f6><a href="/blogs/category1/2018/121501.html#_0-5px的线如何实现" class="sidebar-link reco-side-_0-5px的线如何实现" data-v-cb1513f6>0.5px的线如何实现</a></li><li class="level-2" data-v-cb1513f6><a href="/blogs/category1/2018/121501.html#总结" class="sidebar-link reco-side-总结" data-v-cb1513f6>总结</a></li></ul></main> <!----></div></div></div></div><div class="global-ui"><div class="back-to-ceiling" style="right:1rem;bottom:6rem;width:2.5rem;height:2.5rem;border-radius:.25rem;line-height:2.5rem;display:none;" data-v-c6073ba8 data-v-c6073ba8><svg t="1574745035067" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5404" class="icon" data-v-c6073ba8><path d="M526.60727968 10.90185116a27.675 27.675 0 0 0-29.21455937 0c-131.36607665 82.28402758-218.69155461 228.01873535-218.69155402 394.07834331a462.20625001 462.20625001 0 0 0 5.36959153 69.94390903c1.00431239 6.55289093-0.34802892 13.13561351-3.76865779 18.80351572-32.63518765 54.11355614-51.75690182 118.55860487-51.7569018 187.94566865a371.06718723 371.06718723 0 0 0 11.50484808 91.98906777c6.53300375 25.50556257 41.68394495 28.14064038 52.69160883 4.22606766 17.37162448-37.73630017 42.14135425-72.50938081 72.80769204-103.21549295 2.18761121 3.04276886 4.15646224 6.24463696 6.40373557 9.22774369a1871.4375 1871.4375 0 0 0 140.04691725 5.34970492 1866.36093723 1866.36093723 0 0 0 140.04691723-5.34970492c2.24727335-2.98310674 4.21612437-6.18497483 6.3937923-9.2178004 30.66633723 30.70611158 55.4360664 65.4791928 72.80769147 103.21549355 11.00766384 23.91457269 46.15860503 21.27949489 52.69160879-4.22606768a371.15156223 371.15156223 0 0 0 11.514792-91.99901164c0-69.36717486-19.13165746-133.82216804-51.75690182-187.92578088-3.42062944-5.66790279-4.76302748-12.26056868-3.76865837-18.80351632a462.20625001 462.20625001 0 0 0 5.36959269-69.943909c-0.00994388-166.08943902-87.32547796-311.81420293-218.6915546-394.09823051zM605.93803103 357.87693858a93.93749974 93.93749974 0 1 1-187.89594924 6.1e-7 93.93749974 93.93749974 0 0 1 187.89594924-6.1e-7z" p-id="5405" data-v-c6073ba8></path><path d="M429.50777625 765.63860547C429.50777625 803.39355007 466.44236686 1000.39046097 512.00932183 1000.39046097c45.56695499 0 82.4922232-197.00623328 82.5015456-234.7518555 0-37.75494459-36.9345906-68.35043303-82.4922232-68.34111062-45.57627738-0.00932239-82.52019037 30.59548842-82.51086798 68.34111062z" p-id="5406" data-v-c6073ba8></path></svg></div></div></div>
    <script src="/assets/js/app.d498e529.js" defer></script><script src="/assets/js/3.116f0635.js" defer></script><script src="/assets/js/1.f7c6ffb6.js" defer></script><script src="/assets/js/11.6510b799.js" defer></script>
  </body>
</html>
